<template>
  <myLeftRightLaout>
    <template v-slot:leftL>
      <myList height="100%" width="100%" @listToggle="listToggle" :listData="listData"></myList>
    </template>
    <template v-slot:rightL>
      <suspense>

        <bigData></bigData>
        <template #fallback>
          正在加载...
        </template>
      </suspense>
      <pre>
  用途:加载大数据组件时异步加载
  用法:const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
  // ...从服务器获取组件
  resolve(/* 获取到的组件 */)
  })
  })
  实现:
</pre>
    </template>
  </myLeftRightLaout>
</template>

<script setup lang="ts">
import myLeftRightLaout from '@/components/myLeftRightLaout/index.vue'
import { defineAsyncComponent } from 'vue';
import myList from '@/components/myList/index.vue'
const bigData = defineAsyncComponent({
  loader: () => import('@/components/particleCom/bigData.vue')
})
const listData = [
  {
    "label": "异步组件"
  },
  {
    "label": "vue.use"
  },
  {
    "label": "vite分包"
  }
]
const listToggle = () => {
  // console.log(current);
}
</script>
<style lang="scss" scoped></style>